<template>

  <div class="page-container">
    <div class="container">
      <!-- 标题区域 -->
      <h1 class="page-title">
        <span>{{obj.title}}</span>
      </h1>

      <!-- 点赞/踩区域 -->
      <div class="feedback-section">
        <div class="feedback-button like-button" @click="clickLikeOrDislike('true')">
          <i class="fas el-icon-top"></i> 赞 <span id="like-count">&nbsp;{{obj.likeNum}}</span>
        </div>
        <div class="feedback-button dislike-button" @click="clickLikeOrDislike('false')">
          <i class="fas el-icon-bottom"></i> 踩 <span id="dislike-count">&nbsp;{{obj.dislikesNum}}</span>
        </div>
      </div>

      <!-- 文章元信息 -->
      <div class="meta-info">
        <span><i class="fas el-icon-user"></i> 发布者: {{obj.userName}}</span>
        <span><i class="fas el-icon-time"></i> 发布时间: {{obj.createTime}}</span>
        <span><i class="fas el-icon-odometer"></i> 最后更新: {{obj.updateTime}}</span>
        <span><i class="fas el-icon-view"></i> 浏览次数: {{obj.readNum}}</span>
      </div>

      <!-- 正文内容区域 -->
      <mavon-editor v-model="obj.content" :boxShadow="false" style="font-size: 12px;" :subfield="false" :defaultOpen="'preview'" :editable="false" :toolbarsFlag="false" />

      <!-- 评论区域 -->
      <div class="comments-section">
        <div class="comments-header">
          <h3 class="comments-title">用户评论</h3>
          <div class="comment-stats">共{{obj.commentNum}}条评论</div>
        </div>

        <!-- 添加新评论 -->
        <div>
          <el-form :model="commentForm" ref="commentFormRef">
            <div>
              <div style="display: flex; flex-direction: column; align-items: flex-end;">
                <el-form-item prop="content" style="width: 100%;">
                  <el-input
                    type="textarea"
                    :rows="3"
                    v-model="commentForm.comment"
                    placeholder="请输入您的评论..."
                  ></el-input>
                </el-form-item>

                <el-button
                  type="primary"
                  @click="saveOpsKnowledgeComment"
                  :loading="submitting"
                  :disabled="!commentForm.comment">
                  发布评论
                </el-button>
              </div>
            </div>
          </el-form>
        </div>

        <div id="comments-container">
          <div class="empty-comments" v-if="tableData == null || tableData.length === 0">暂无评论，快来发表第一条评论吧！</div>
          <div v-else>
            <div v-for="comment in tableData" :key="comment.id" class="comment-item">
              <div class="comment-meta">
                <el-avatar size="small" :src="comment.icoUrl || require('@/assets/images/ico/head.png')" />

                <i class="fas fa-user"></i> {{ comment.userName }} •
                <i class="fas fa-clock"></i> {{ comment.createTime }}
              </div>
              <div class="comment-content">{{ comment.comment }}</div>
            </div>
          </div>
        </div>

        <!--分页部分-->
        <el-pagination
          style="width:33%; margin-right:10px; margin-top:10px;"
          background
          layout="total, prev, pager, next, jumper"
          @current-change="pageCurrentChange"
          :page-size="pageConfig.size"
          :current-page="pageConfig.current"
          :pager-count="5"
          :total="pageConfig.total">
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>

import http from '@/utils/http'

export default {
  name: "OpsKnowledgeDetailed",
  data(){
    return {
      // 列表的尺寸
      size: 'small',
      // tag的大小
      mini: 'mini',
      // tag 的大小
      tagSize: 'small',
      // 展示的数据
      obj: {},
      // 分页参数
      pageConfig: {
        // 每页记录数
        size: 20,
        // 当前页码
        current: 1,
        // 总记录数
        total: 0,
      },
      // 表格数据
      tableData: [],
      // 是否可提交
      submitting: false,
      // 可提交的评论
      commentForm: {
        comment: ''
      },
    }
  },
  methods: {
    /**
     * 更新读的数量
     */
    updReadNum(){
      let param = {
        id: this.$route.query.id,
      }
      http.post("/opsKnowledge/updReadNum", param).then(response => {
        let res = response.data;
        this.getKnowledgeInfo()

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 点击踩或者喜欢
     * @param isLike 是否喜欢，true 表示喜欢
     */
    clickLikeOrDislike(isLike){
      let param = {
        id: this.$route.query.id,
        isLike: isLike,
      }
      http.post("/opsKnowledge/clickLikeOrDislike", param).then(response => {
        let res = response.data;
        this.getKnowledgeInfo()

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 保存评论
     */
    saveOpsKnowledgeComment(){
      this.commentForm.knowledgeId = this.$route.query.id
      http.post("/opsKnowledgeComment/saveOpsKnowledgeComment", this.commentForm).then(response => {
        let res = response.data;

        this.$message.success ("保存成功");
        this.getListPage()
        this.getKnowledgeInfo()
        this.commentForm.comment = null

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 分页被改变的时候
     * @param value 当前页
     */
    pageCurrentChange(value) {
      this.pageConfig.current = value
      this.getListPage()
    },
    /**
     * 知识库信息
     */
    getKnowledgeInfo() {
      let query = {
        current: 1,
        size: 999,
        id: this.$route.query.id,
      }
      http.post("/opsKnowledge/getListPage", query).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 表格数据
        if (data.records != null && (data.records.length > 0)) {
          this.obj = data.records[0]
        }

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 知识库评论
     */
    getListPage() {
      let query = {
        current: 1,
        size: 999,
        knowledgeId: this.$route.query.id,
      }
      http.post("/opsKnowledgeComment/getListPage", query).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 表格数据
        this.tableData = data.records
        // 异步加载每个图片
        this.tableData.forEach(item => this.getImageUrlInfo(item));

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 渲染图片
     * 只能这样做，图片这里不支持非固定地址返回
     * @param item 目标数据
     */
    getImageUrlInfo(item) {
      if (!item || !item.ico || item.ico === 'null') {
        // 判空或无效，直接显示默认图
        this.$set(item, 'icoUrl', null);
        return;
      }

      http.getImageUrl(item.ico)
        .then(url => {
          // 异步赋值，触发响应式更新
          this.$set(item, 'icoUrl', url);
        })
        .catch(() => {
          // 下载失败 fallback 默认图
          this.$set(item, 'icoUrl', null);
        });
    },
  },
  // 进入马上执行
  mounted() {
    this.getKnowledgeInfo()
    this.getListPage()
    this.updReadNum()
  },
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
}

.container {
  max-width: 1000px;
  margin: 20px auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 500;
  color: #303133;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}

.feedback-section {
  display: flex;
  align-items: center;
  margin: 15px 0;
}

.feedback-button {
  margin-right: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #909399;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.feedback-button:hover {
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.feedback-button i {
  margin-right: 5px;
}

.meta-info {
  color: #909399;
  font-size: 13px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.meta-info span {
  display: flex;
  align-items: center;
}

.meta-info i {
  margin-right: 5px;
}

.comments-section {
  margin-top: 30px;
}

.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.comments-title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.comment-item {
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-meta {
  color: #909399;
  font-size: 13px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.comment-meta i {
  margin-right: 5px;
}

.comment-content {
  line-height: 1.6;
  padding-left: 30px;
}

.empty-comments {
  text-align: center;
  padding: 30px;
  color: #909399;
}

@media (max-width: 768px) {
  .container {
    margin: 10px;
    padding: 15px;
  }

  .meta-info {
    flex-direction: column;
    gap: 8px;
  }

  .comments-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

</style>


<style>

/*md预览的背景色 start*/
.v-note-panel{
  border: none !important;
}

.v-show-content {
  background-color: white !important;
}

/*md预览的背景色end */

</style>

